<template>
  <van-skeleton title v-if="state.newsInfo === null" :row="20" />
  <div class="content-box" v-else v-html="state.newsInfo.body"></div>
  <div class="nav-box">
    <van-icon name="arrow-left" @click="handle"></van-icon>
    <van-icon name="comment-o" :badge="state.comments"></van-icon>
    <van-icon name="good-job-o" :badge="state.popularity"></van-icon>
    <van-icon name="star-o" :color='isStore?"#1989fa":""' @click="storeHandle"></van-icon>
    <van-icon name="share-o" color="#ccc"></van-icon>
  </div>
</template>
<script setup>
import { storeToRefs } from "pinia";
import { Toast } from "vant";
import {
  computed,
  onBeforeMount,
  onBeforeUnmount,
  onUpdated,
  reactive,
} from "vue-demi";
import { useRoute, useRouter } from "vue-router";
import api from "../api/index";
import { useStore } from "../store";
// 初始化路由
const router = useRouter();
let route = useRoute();
// 初始化数据
let state = reactive({
  comments: 0,
  popularity: 0,
  newsInfo: null,
});
const store = useStore();
console.log(store.storeList);
onBeforeMount(async () => {
  if (store.isLogin === null) {
    await store.changeIsLoginAsync();
  }
  if (store.isLogin) {
    if (store.info === null) await store.changeInfoAsync();
    if (store.storeList === null)  store.changeStoreListAsync();
    console.log('beforeMount',store.storeList);
  }
});
const isStore = computed(() => {
  let {isLogin,storeList} = store
  console.log("computed",storeList);
  if(!Array.isArray(storeList)){storeList = []}
  if (isLogin) {
    return storeList.some((item) => {
      return +item.news.id === +route.params.id;
    });
  }
  return false;
});
const storeHandle = async ()=>{
  if(!store.isLogin){
    Toast('请先登录')
    router.push({
      path:"/login",
      query:{
        from:`detail/${route.params.id}`,
      }
    });
    return 
  }
  if(isStore.value){
    return
  }
  let {code} = await api.store(route.params.id)
  if(+code!==0){
    Toast('收藏失败')
    return
  }
  Toast('成功收藏')
  store.changeStoreListAsync()
}
// 返回
const handle = () => {
  router.back();
};
// 移除数据
onBeforeUnmount(() => {
  let link = document.getElementById("link");
  if (!link) return;
  document.head.removeChild(link);
});
// 获取数据
onBeforeMount(async () => {
  let res = await api.queryNewsInfo(route.params.id);
  let stateRes = await api.queryNewsStory(route.params.id);
  // 绑定数据
  state.popularity = stateRes.popularity;
  state.comments = stateRes.comments;
  state.newsInfo = res;
  let link = document.createElement("link");
  link.id = "link";
  link.rel = "stylesheet";
  link.href = res.css[0];
  document.head.appendChild(link);
});
onUpdated(() => {
  let imgHolder = document.querySelector(".img-place-holder");
  let title = document.querySelector(".question-title");
  if(imgHolder!==null){
    if (imgHolder.innerHTML.trim() === "") {
    imgHolder.innerHTML += `<img src="${state.newsInfo.image}" alt=""/>`;
  }
  title.innerHTML = state.newsInfo.title;
  }
});
</script>

<style lang="less" scoped>
.van-skeleton {
  padding: 30px 15px;
}
.content-box {
  background: #fff;
  padding-bottom: 50px;
  margin: 0;
  position: relative;

  /deep/ .img-place-holder {
    height: 375px;
    overflow: hidden;
    box-shadow: rgb(151, 149, 149) 10px 0px 20px;
    img {
      display: block;
      margin: 0;
      width: 100%;
      min-height: 100%;
      z-index: -1;
    }
  }
  /deep/ .meta {
    white-space: normal;
    padding-top: 10px;

    .originUrl {
      display: block;
      color: #6cc8ff;
      text-align: right;
    }
  }

  /deep/.question-title {
    position: absolute;
    top: 315px;
    left: 0;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    height: 60px;
    color: rgb(246, 245, 245);
    padding: 0px 20px;
    line-height: 25px;
    z-index: 9;

    &::after {
      width: 100%;
      height: 60px;
      display: block;
      background: -webkit-linear-gradient(
        top,
        rgba(90, 114, 111, 0.759),
        rgba(82, 76, 76, 0.737),
        rgba(172, 156, 156, 0.743)
      );
      content: "";
      position: absolute;
      top: -10px;
      right: 0;
      bottom: 0;
      left: 0;
      filter: blur(20px);
      opacity: 0.8;
      z-index: -1;
    }
  }
}
.nav-box {
  position: fixed;
  bottom: -3px;
  left: 0;
  width: 100%;
  background: #f4f4f4;
  justify-content: space-between;
  display: flex;
  box-sizing: border-box;
  align-items: center;
  height: 50px;
  padding: 0 20px;

  .van-icon:nth-child(1) {
    position: relative;
    &::after {
      position: absolute;
      width: 1px;
      height: 120%;
      background: #d5d5d5;
      content: "";
      right: -15px;
      top: -10%;
    }
  }
  /deep/ .van-badge {
    background-color: transparent;
    border: none;
    color: #000;
    right: -5px;
  }
}
</style>
